<template>
  <div>
    <m-table
      :data="tabelList"
      :selection="true"
      :checked-item.sync="selelctData"
    >
      <template v-slot:header="{ row }">
        <div style="width: 100%">
          <span style="margin-right: 50px">ID：{{ row.pointId }}</span>
          <span style="margin-right: 50px">申请时间：{{ row.createTime }}</span>
        </div>
      </template>
      <m-table-column
        label="提货点信息"
        :width="currentTabNow === 'PointCheck' ? '180' : '330'"
      >
        <template v-slot="{ row }">
          <div class="staff__info-box">
            <img :src="row.avatarUrl" alt />
            <div class="info_con" style="width: calc(100% - 63px)">
              <div style="width:100px" :title="row.nikeName">
                {{ row.nikeName }}({{ row.author }})
              </div>
              <div>{{ row.pointPhone }}</div>
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column
        label="提货点名称"
        width="150"
        v-if="currentTabNow === 'PointCheck'"
      >
        <template v-slot="{ row }">
          <div v-if="currentTabNow === 'PointCheck'">
            <div style="margin:12px 0px 0px 5px">{{ row.pointName }}</div>
          </div>
          <div v-else style="margin:12px 0px 0px 5px">-</div>
        </template>
      </m-table-column>
      <m-table-column label="提货点地址" width="150">
        <template v-slot="{ row }">
          <div>
            <div>{{ row.pointAddress }}</div>
          </div>
        </template>
      </m-table-column>
      <m-table-column label="联系人" width="90">
        <template v-slot="{ row }">
          <div>{{ row.author }}</div>
        </template>
      </m-table-column>
      <m-table-column label="佣金" width="80">
        <template>
          <span>-</span>
        </template>
      </m-table-column>
      <m-table-column label="团长" width="80">
        <template>
          <span>-</span>
        </template>
      </m-table-column>
      <m-table-column label="操作" width="160">
        <template v-slot="{ row }">
          <div v-if="currentTabNow === 'PointCheck'">
            <el-dropdown
              trigger="click"
              placement="bottom-end"
              @command="dealAudit"
            >
              <span class="el-dropdown-link">
                审核
                <i
                  class="el-icon-arrow-down el-icon--right"
                  style="color: blue"
                ></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ item: row, type: '1' }"
                  >同意</el-dropdown-item
                >
                <el-dropdown-item :command="{ item: row, type: '2' }"
                  >拒绝</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-if="currentTabNow === 'PointRefuse'">
            <el-button type="danger" @click="delPoint(row)">删除</el-button>
          </div>
        </template>
      </m-table-column>
    </m-table>

    <PointDialog
      :pointDialog.sync="pointDialog"
      :pointData="pointData"
      :lineDialog.sync="lineDialog"
      :stagingLines.sync="stagingLines"
      @emitPointData="emitPointData"
    ></PointDialog>

    <LineDialog
      :lineDialog.sync="lineDialog"
      @saveLineData="saveLineData"
    ></LineDialog>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  PropSync,
  Prop,
  Emit,
  Watch,
} from "vue-property-decorator";
import PointDialog from "./PointDialog.vue";
import LineDialog from "./LineDailog.vue";
import {
  setShipperPointInfo,
  setPointStatusSingle,
  delPointFunc,
} from "@/api/rection/index";

@Component({
  components: { PointDialog, LineDialog },
})
export default class AddrLessTable extends Vue {
  @Prop({ default: [] })
  tabelList: any;

  @Prop({})
  currentTab: any;

  currentTabNow = "PointCheck";

  @PropSync("deletLinesStatus", { default: true, type: Boolean })
  syncDeletLinesStatus: boolean;

  /** 编辑提货点弹框 */
  pointDialog = false;

  /** 新增线路弹框 */
  lineDialog = false;

  // 批量删除列表
  deleteIds = [];

  // 添加线路暂存对象
  stagingLines = [];

  /** 提货点 */
  pointData = {
    /** 提货点类型0=自定提货点，1=菜鸟驿站 */
    type: 0,
    /** 提货点名称 */
    name: "",
    /** 关联线路id */
    lineId: "",
    /** 关联线路名称 */
    lineName: "",
    /** 关联区域id */
    communityId: 1,
    /** 关联区域名称 */
    communityName: "",
    /** 省id */
    provinceId: "",
    /** 省名称 */
    provinceName: "",
    /** 市id */
    cityId: "",
    /** 市名称 */
    cityName: "",
    /** 区id */
    districtId: "",
    /** 区名称 */
    districtName: "",
    /** 具体位置坐标，经度纬度 */
    lngLat: "",
    /** 联系人姓名 */
    author: "",
    /** 联系电话 */
    phone: "",
    /** 提货点图片，json数组 */
    img: [],
    /** 提货点id */
    pointId: "",
    /** 提货点详情地址 */
    address: "",
  };

  @Emit("deletePoints")
  emitDeletePoints(data) {
    return data;
  }

  @Emit("refreshTabelData")
  refreshTabelData(data) {
    return data;
  }

  /** 选中数据 */
  selelctData = [];

  @Watch("selelctData")
  onSelelctListChanged(val: any[]) {
    this.handleSelectionChange(val);
  }

  @Watch("currentTab")
  getCurrentTab() {
    this.init();
  }

  mounted() {
    this.init();
  }

  init() {
    this.currentTabNow = JSON.parse(JSON.stringify(this.currentTab));
  }

  dealAudit(command) {
    const item = command.item;
    const type = command.type;
    const pointId = item.pointId;
    if (type === "1") {
      this.$router.push({
        name: "editPoint",
        query: { pointId, from: this.$parent.currentTab },
      });
    } else {
      this.refuseApply(item);
    }
  }

  /**
   * 拒绝
   */
  refuseApply(item) {
    const param = {
      pointId: Number(item.pointId),
      pointStatus: 3,
    };
    this.$confirm("确定拒绝该用户的申请?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      setPointStatusSingle(`?pointStatus=${3}&pointId=${param.pointId}`)
        .then(() => {
          this.$parent.getTabelList();
          this.$message.success("操作成功");
        })
        .catch(e => {
          this.$message.error(e || "网络错误");
        });
    });
  }

  /** 前往佣金详情 */
  goCDetail(id) {
    this.$router.push({
      path: "/finance/commissionDetails",
      query: { accountType: "POINT", userId: id },
    });
  }

  /**
   * 前往团长列表页面
   */
  gotoComman(num) {
    if (!num) {
      return false;
    }
  }

  // 多选change事件
  handleSelectionChange(e) {
    this.deleteIds = e.reduce((a, b) => {
      return a.concat(b.pointId);
    }, []);
    this.syncDeletLinesStatus = this.deleteIds.length === 0;
  }

  /**
   * 删除线路
   */
  deletePoints(ids) {
    this.emitDeletePoints(ids);
  }

  /**
   * 编辑提货点详情
   */
  emitPointData(data) {
    setShipperPointInfo(data)
      .then(res => {
        if (res.code === 200) {
          this.stagingLines = [];
          this.refreshTabelData(res);
          this.$message.success("保存成功");
        }
      })
      .catch(err => {
        this.$message.error(err.msg || "网络异常，请稍后重试");
      });
  }

  /**
   * 删除提货点
   */
  delPoint(row) {
    const list = [];
    list.push(row.pointId);
    const param = {
      lists: list,
    };
    this.$confirm("确定删除此提货点信息?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      delPointFunc(param)
        .then(res => {
          this.$message.success("删除成功");
          this.$parent.getTabelList();
          console.log(res);
        })
        .catch(e => {
          this.$message.error(e || "网络错误");
        });
    });
  }

  /**
   * 新增线路时将线路内容添加到暂存区
   */
  saveLineData(data) {
    /** 设置一个零时ID */
    this.stagingLines.push({
      ...data,
      lineId: `temp_${Date.now()}`,
    });
    this.lineDialog = false;
  }

  /**
   * 切换提货点状态
   */
  pointStatusChange(row) {
    setPointStatusSingle(
      `?pointStatus=${row.pointStatus}&pointId=${row.pointId}`,
    )
      .then(res => {
        if (res.code === 200) {
          this.$message.success(
            row.pointStatus === 1 ? "关闭成功" : "开启成功",
          );
        } else {
          row.pointStatus = Number(!row.pointStatus);
          this.$message.error(res.msg || "网络异常，请稍后重试");
        }
      })
      .catch(err => {
        row.pointStatus = Number(!row.pointStatus);
        this.$message.error(err || "网络异常，请稍后重试");
      });
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/logistics/pickPoint.scss";
.staff__info-box {
  width: 180px;
  height: 60px;
  position: relative;

  img {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 6px;
  }

  .info_con {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 5px;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    flex-wrap: wrap;

    div {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.pointArea--info_con {
  display: inline-block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 5px 0 5px;
  position: absolute;
  top: 0;
  right: 0;

  div {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.emptyLine {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-left: -15px;
  font-size: 14px;
  color: #b3b3b3;
}
</style>
